<template>
  <div :class="$style.infoImport">
    <Button type="primary" @click="visible = true">信息导入</Button>
    <el-dialog
      :visible.sync="visible"
      title="信息导入"
      :close-on-click-modal="false"
      destroy-on-close
      :append-to-body="true"
      @close="resetHandle"
    >
      <div :class="$style.content">
        <el-alert :closable="false" show-icon>
          单击<a
            href="#"
            :download="'信息导入模板' + new Date().getTime()"
            :class="$style.tip"
          >下载</a>导入模板
        </el-alert>
        <div :class="$style.upload">
          <Upload
            :on-before-remove="abortRemove"
            prevent-remove
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :exist-file-list="existFileList"
            @on-success="uploadSuccess"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Button from '@/components/Button'
import Upload from '@/components/Upload'
export default {
  name: 'InfoImport',
  components: {
    Button,
    Upload
  },
  data() {
    return {
      visible: false,
      fileList: [],
      existFileList: new Array(10).fill(1).map((e, i) => ({ name: '测试' + i, url: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g1/M08/04/0E/ChMljl8RDpqIHrBNAEGw1_hq_QIAAQWCwCX_LYAQbDv136.jpg' }))
    }
  },
  methods: {
    resetHandle() {
      this.fileList = []
    },
    // 上传成功
    uploadSuccess(response, file, fileList) {
      this.$emit('refresh', response, file, fileList)
    },
    // 阻止删除
    abortRemove() {
      return Promise.reject()
    }
  }
}
</script>
<style lang="scss" module>
.infoImport {
  display: inline-block;
  & .tip {
    color: black;
  }
  .content{
    margin: -10px;
    & .upload {
      padding: 10px;
    }
  }
}
</style>
